<template>
    <div class="other_box flex_column_between" v-loading="loading">
    <div class="words_cont" v-if="listData.length>0">
        <el-collapse accordion v-model="activeNames">
            <el-collapse-item v-for="(item, index) in listData" :key="index" :disabled="item.isAllDay == 1" :name="index">
                <template slot="title">
                    <div class="item flex_center_between">
                        <div class="flex_center cont1">
                            <img class="imgkm" src="@/assets/add.svg" v-if="item.isAllDay == 0 && activeNames != index" alt="" srcset="">
                            <img class="imgkm" src="@/assets/minus.svg" v-if="item.isAllDay == 0 && activeNames == index" alt="" srcset="">
                            <span class="label">{{ formatDate(item.date) }}</span>
                        </div>
                        <div class="flex_center cont2">
                            <template v-if="item.isAllDay == 1 && item.type.value == 1">
                                <img src="@/assets/img/work.png" alt="">
                                <span class="text">可全天上课</span>
                            </template>
                           <template v-if="item.isAllDay == 1 && item.type.value == 2">
                                <img src="@/assets/img/rest.png" alt="">
                                <span class="text">全天休息</span>
                           </template>
                           <template v-if="item.isAllDay == 0">
                                <img src="@/assets/img/port.png" alt="">
                                <span class="text" v-if="item.isAllDay == 0">部分时间上课</span>
                           </template>
                        </div>
                        <div class="flex_center cont3">
                            <p class="_row flex" v-if="item.isAllDay == 0">
                                <span class="flag" v-for="(i, key) in item.list" :class="key < 10 ? 'bgGreen' : 'bgy'"></span>
                            </p>
                        </div>
                        <div class="cont4">
                        <template v-if="item.isAllDay == 1">
                            <div class="right_cont flex_center cur ">
                                <span class="text1" v-if="item.list[0].status.value == 2">{{ item.list[0].status.name }}, 拒绝原因：{{ item.list[0].status.remarks ? item.list[0].status.remarks : '无' }}</span>
                                <!-- <span class="text1" v-else>{{ item.list[0].status.name }}</span> -->
                            </div>
                            <div class="right_cont flex_center cur" @click="deleteFun(item.list[0])">
                                <img src="@/assets/img/delete.png" alt="">
                                <span class="text1">删除</span>
                            </div>
                        </template>
                    </div>
                    </div>
                </template>
                <div class="item flex_center_between" v-for="(_item, _index) in item.list" :key="_index">
                    <div class="flex_center cont1">
                        <span class="label" style="margin-left: 3.4rem;">{{ formatDate(_item.date) }}</span>
                    </div>
                    <div class="flex_center cont2">
                        <img src="@/assets/img/rest.png" alt="">
                        <span class="text">{{ _item.startTime }} - {{ _item.endTime }} 不上课</span>
                    </div>
                    <div class="flex_center cont3">
                        <p class="_row">
                            <span class="tag2">{{ _item.startTime }} - {{ _item.endTime }} 休息</span>
                        </p>
                    </div>
                    <div class="cont4">
                        <div class="right_cont flex_center cur">
                            <span class="text1" v-if="_item.status.value == 2">{{ _item.status.name }}, 拒绝原因：{{ _item.status.remarks ? _item.status.remarks : '无' }}</span>
                            <!-- <span class="text1" v-else>{{ _item.status.name }}</span> -->
                        </div>
                        <div class="right_cont flex_center cur" @click="deleteFun(_item)">
                            <img src="@/assets/img/delete.png" alt="">
                            <span class="text1">删除</span>
                        </div>
                    </div>

                </div>
            </el-collapse-item>
        </el-collapse>

    </div>
    <template v-else>
          <empty type="1" text="暂无记录"></empty>
        </template>
    <!-- 分页 -->
    <pagination v-if="listData.length > 0" :total="total" :currentPage="currentPage" :pageSize="pageSize"
        @current-change="changePage"></pagination>
</div>

</template>

<script>
import { restList, deleteRest } from '@/api/rest.js'
export default {
    components:{
    },
    data() {
        return {
            activeNames:'0',
            loading: false,
            listData: [],
            currentPage: 1, // 当前页
            pageSize: 15, // 每页条数
            total: 0, // 总条数
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
        getList() {
            this.loading = true
            restList({
                page: this.currentPage,
            }).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.listData = res.data.list
                    this.pageSize = res.data.perPage
                    this.total = res.data.total
                }
            })
        },
        deleteFun(row) {
            this.$confirm('确认是否删除该申请记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                deleteRest({
                    id: row.id
                }).then(res => {
                    this.loading = false
                    if (res.error == 0) {
                        this.$message.success('删除成功')
                        this.getList()
                    }
                })
            }).catch((err) => {
            });
        },
        formatDate(time) {
            if (time) {
                let createdTime = time.split('-')
                time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
        changePage(page){
            this.currentPage = page
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.el-collapse{
    width: 100%;
}
::v-deep .el-collapse-item__arrow{
    display: none !important;
}
::v-deep .el-collapse-item__header{
    // padding: 30rem 20rem 30rem 0;
    // padding: 32rem 0;

    border-bottom: none;
    line-height: normal;
}
::v-deep .el-collapse{
   border: none;
}
::v-deep .el-collapse-item__wrap{
    border: none !important;
}
::v-deep .el-collapse-item__content{
    padding-bottom: 0;
}
.el-collapse-item{
    margin-bottom: 6.0rem;
}
::v-deep .el-collapse-item__wrap{
    margin-top: 3.0rem;
}
.other_box{
    width: 100%;
    flex: 1;
    overflow: auto;
}
    .words_cont{
        width: 100%;
        height:calc(100% - 3rem);
        overflow-y: scroll;
        .item{
            // padding: 32rem 0;
            padding: 3.0rem 2.0rem 3.0rem 0;

            width: 100%;
            color: #3A3F5E;
            border-bottom: .1rem solid #F0F2F4;
            .cont1{
                width: 20%;
            }
            .cont2{
                width: 25%;
            }
            .cont3{
                width: 35%;
            }
            .cont4{
                width: 20%;
            }
            .flex_center{
                font-size: 1.2rem;
                .imgkm{
                    margin-right: 1.2rem;
                }
                .label{
                    font-size: 2.2rem;
                    font-family: Open Sans;
                    display: block;
                    // width: 300rem;

                }
                .text{
                    font-family: MicrosoftYaHei;
                    font-size: 2.0rem;
                    margin-left: 1.0rem;
                }
                ._row{
                    width: 29.0rem;
                    text-align: left;
                    .flag{
                        width: 1.0rem;
                        height: 2.4rem;
                        border-radius: .4rem;
                        margin-right: .3rem;
                    }
                }
                .tag{
                    width: 29.0rem;
                    padding: .4rem 0;
                    border-radius: .4rem;
                    text-align: center;
                    background: #40D463;
                    color: #fff;
                }
                .tag1{
                    padding: .4rem 1.0rem;
                    border-radius: .4rem;
                    text-align: center;
                    background: #40D463;
                    color: #fff;
                    margin-right: .8rem;
                }
                .tag2{
                    padding: .4rem 1.0rem;
                    border-radius: .4rem;
                    text-align: center;
                    background: #F69B2C;
                    color: #fff;

                }
                .tag3{
                    width: 29.0rem;
                    padding: .4rem 0;
                    border-radius: .4rem;
                    text-align: center;
                    background: #F69B2C;
                    color: #fff;
                }

            }
            .right_cont{
                text-align: right;
                justify-content: flex-end;
                .text1{
                    margin-left: 1.6rem;
                    font-size: 1.8rem;
                    color: #626780;

                }
            }
        }
        &::-webkit-scrollbar {
            width: .6rem;
            height: .1rem;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: .5rem;
            background-color:$background-theme;
        }
        &::-webkit-scrollbar-track {
            background: #fff;
            border-radius: .5rem;
        }
    }
</style>
